<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <!-- 左侧内容 -->
        <el-tabs v-model="activeName" class="left_content">
          <el-tab-pane label="销售额" name="sale"></el-tab-pane>
          <el-tab-pane label="访问量" name="visits"></el-tab-pane>
        </el-tabs>
        <!-- 右侧内容 -->
        <div class="right_content">
          <span @click="setDay">今日</span>
          <span @click="setWeek">本周</span>
          <span @click="setMonth">本月</span>
          <span @click="setYear">本年</span>
          <el-date-picker v-model="valueDate" class="datebox" size="mini" type="daterange" range-separator="-" start-placeholder="开始日期"
            end-placeholder="结束日期" format="yyyy-MM-dd">
          </el-date-picker>
        </div>
      </div>
      <el-row>
        <el-col :span="16">
          <!-- 容器 -->
          <div ref="bar" style="width: 100%;height: 300px;"></div>
        </el-col>
        <el-col :span="8">
          <h3>门店{{title}}排名</h3>
          <ul>
            <li>
              <span class="index">1</span>
              <span class="pinpai">肯德基</span>
              <span class="money">9999999</span>
            </li>
            <li>
              <span class="index">2</span>
              <span class="pinpai">肯德基</span>
              <span class="money">9999999</span>
            </li>
            <li>
              <span class="index">3</span>
              <span class="pinpai">肯德基</span>
              <span class="money">9999999</span>
            </li>
            <li>
              <span class="index1">4</span>
              <span class="pinpai">肯德基</span>
              <span class="money">9999999</span>
            </li>
            <li>
              <span class="index1">5</span>
              <span class="pinpai">肯德基</span>
              <span class="money">9999999</span>
            </li>
            <li>
              <span class="index1">6</span>
              <span class="pinpai">肯德基</span>
              <span class="money">9999999</span>
            </li>
            <li>
              <span class="index1">7</span>
              <span class="pinpai">肯德基</span>
              <span class="money">9999999</span>
            </li>
          </ul>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
  import * as echarts from 'echarts'
  import * as dayjs from 'dayjs'
  export default {
    name: '',
    data() {
      return {
        // tab栏默认值
        activeName: 'sale',
        // echarts图表的实例
        chars: null,
        // 收集时间
        valueDate:[]
      }
    },
    computed: {
      // 计算属性标题
      title() {
        return this.activeName === 'sale' ? '销售额趋势' : '访问量趋势'
      }
    },
    watch:{
      // 监听属性
      title(){
        // 重新修改图表的配置数据
        // 图表配置数据可以再次修改,如果有新的数值,则修改,没有新的数值则使用以前的数值
        if(this.activeName == 'sale'){
          console.log(1)
          return this.chars.setOption({
            title: {
              text: this.title
            },
            series: [{
              name: 'Direct',
              type: 'bar',
              barWidth: '60%',
              data: [10, 52, 200, 334, 390, 33, 40, 999, 10, 19, 321, 44]
            }]
          })
        }else{
          console.log(2)
          return this.chars.setOption({
            title: {
              text: this.title
            },
            series: [{
              name: 'Direct',
              type: 'bar',
              barWidth: '60%',
              data: [1, 112, 232, 134, 190, 133, 140, 199, 10, 19, 321, 44]
            }]
          })
        }
      }
    },
    mounted() {
      // 初始化 echarts 实例
      this.chars = echarts.init(this.$refs.bar)
      // 配置数据
      this.chars.setOption({
        title: {
          text: "销售额趋势"
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: "shadow"
          }
        },
        grid: {
          left: '0%',
          right: '0%',
          bottom: '0%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月', ],
          axisTick: {
            alignWithLabel: true
          }
        }],
        yAxis: [{
          type: 'value'
        }],
        series: [{
          name: 'Direct',
          type: 'bar',
          barWidth: '60%',
          data: [10, 52, 200, 334, 390, 33, 40, 999, 10, 19, 321, 44]
        }]
      })
    },
    methods:{
      // 获取今天的回调函数
      setDay(){
        let date = dayjs().format('YYYY-MM-DD')
        this.valueDate = [date,date]
      },
      // 获取本周的回调函数
      setWeek(){
        let date1 = dayjs().day(1).format('YYYY-MM-DD')
        let date2 = dayjs().day(7).format('YYYY-MM-DD')
        this.valueDate = [date1,date2]
      },
      // 获取本月的回调函数
      setMonth(){
        let date1 = dayjs().startOf('month').format('YYYY-MM-DD')
        let date2 = dayjs().endOf('month').format('YYYY-MM-DD')
        this.valueDate = [date1,date2]
      },
      // 获取本年的回调函数
      setYear(){
        let date1 = dayjs().startOf('year').format('YYYY-MM-DD')
        let date2 = dayjs().endOf('year').format('YYYY-MM-DD')
        this.valueDate = [date1,date2]
      },
    }
  }
</script>

<style scoped>
  .index1 {
    width: 20px;
    height: 20px;
    display: inline-block;
    text-align: center;
  }

  .index {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: black;
    display: inline-block;
    text-align: center;
    color: white;
  }

  .money {
    float: right
  }

  .pinpai {
    margin-left: 30px;
  }

  ul li {
    position: relative;
    list-style: none;
    margin-bottom: 15px;
  }

  h3[data-v-6db1d61a] {
    margin-top: 0;
    padding-left: 40px;
  }

  >>>.el-card__body {
    padding: 0 20px;
  }

  .datebox {
    width: 280px;
  }

  .clearfix {
    position: relative;
    display: flex;
    justify-content: space-between;
  }

  .left_content {
    width: 100%;
  }

  .right_content {
    position: absolute;
    right: 0;
  }

  .right_content span {
    margin: 0 10px;
  }

  /* 深度选择器 */
  >>>.el-card__header {
    border-bottom: none;
  }
</style>
